<template>
  <div id="order-query-wrapper">
    <div class="content">
      <div class="table">
        <el-row style="margin: 30px 0 0 30px;">
          <h3>系统公告新增</h3>
        </el-row>
        <el-form :model="form">
          <el-row style="margin: 30px 0 0 30px;">
            <el-col>
              <el-form-item label="公告标题">
                <el-input v-model="form.title" placeholder="请输入公告标题" style="width: 250px;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin: 30px 0 0 30px;">
            <el-col>
              <el-form-item label="公告类型">
                <el-select v-model="form.announcementType" placeholder="请选择公告类型" clearable style="width: 250px;">
                  <el-option label="系统公告" value="system" />
                  <el-option label="活动通知" value="activity" />
                  <el-option label="政策更新" value="policy" />
                  <el-option label="版本更新" value="version" />
                  <el-option label="紧急通知" value="urgent" />
                  <el-option label="日常通知" value="daily" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin: 30px 0 0 30px;">
            <el-col>
              <el-form-item label="可见类型">
                <el-checkbox label="全体可见" value="all" v-model="form.isSHow"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btn-wrapper">
        <el-button type="primary" @click="handleSubmit">新增</el-button>
      </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';

const form = reactive({
  title: '',
  announcementType: '',
  isSHow: ''
});

function handleSubmit() {}

</script>
<style lang="scss" scoped>
#order-query-wrapper {
  display: flex;
  justify-content: center;
  /* 水平方向居中 */
  align-items: center;
  /* 垂直方向居中 */
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: lightcoral;

  .content {
    display: flex;
    flex-direction: column;
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;

    .table {
      width: 100%;
      height: 100%;
      background-color: lightblue;
      border-radius: 30px;
    }
  }
}
.btn-wrapper{
  text-align: center;
}
</style>